<template>
    <div>
        <!-- 移动端header -->
        <div :class="['mobile-header', { 'mobile-special': special }]">
            <div class="container">
                <!-- 左边icon -->
                <div class="container-icon">
                    <div @click="openMenu" :class="['wrap', {'open': menuOpen}]">
                        <div class="icon-bar"></div>
                        <div class="icon-bar" v-show="!menuOpen"></div>
                        <div class="icon-bar"></div>
                    </div>
                </div>

                <div :class="['center', { 'center__active': menuOpen }]">
                    <a href="/">
                        <div class="iconfont icon-swellpro"></div>
                    </a>
                </div>

                <div class="right">
                    <a href="//store.swellpro.com">
                        <div class="iconfont icon-shangcheng1"></div>
                    </a>
                </div>
            </div>
        </div>

        <!-- menu菜单栏 -->
        <div  :class="['mobile-mask', { 'mobile-mask__open': menuOpen }]">
            <div class="mobile-list">
                <div @click="toggle(index)" class="mobile-list__item" v-for="(item, index) in menu" :key="index">
                    <!-- 一级menu -->
                    <a :href="item.link !== '' ? item.link : 'javascript:volid(0)'">{{item.title}}
                        <i :class="['iconfont', 'icon-xiangxiajiantou', {'icon-rotate': activeIndex === index}]" v-if="item.children"></i>
                    </a>

                    <!-- 二级menu菜单 -->
                    <div :class="['mobile-list__wrap', {'item__open': activeIndex === index}]" v-if="item.children">
                        <a :href="child.link" class="product" v-for="(child, childIndex) in item.children" :key="'child' + childIndex">
                            <img :src="child.img" :alt="child.alt" v-if="child.img">
                            <p>{{child.title}}</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</template>

<script>
export default {
  data () {
    return {
        menuOpen: false, // 是否打开菜单
        activeIndex: -1, //  选中item的下标
        menu:[
                {
                    title: 'Waterproof Drones',
                    link: '',
                    children: [
                        {
                            title: 'SplashDrone 3+',
                            description: 'A multifunctional waterproof drone platform',
                            img: '//cdn.swellpro.cn/newSite/mobile/SD3+.77@2x.png',
                            link: 'https://store.swellpro.com/splashdrone-3-waterproof.html',
                            alt: 'SplashDrone 3+'
                        },
                        {
                            title: 'Spry',
                            description: 'The portable waterproof sport drone',
                            img: '//cdn.swellpro.cn/newSite/mobile/Bitmap@2x.png',
                            link: 'https://store.swellpro.com/spry-sports-drone.html',
                            alt: 'Spry'
                        }
                    ]
                },
                {
                    title: 'Components',
                    link: '',
                },
                {
                    title: 'Support',
                    link: '',
                    children: [
                        {
                            title: 'Aftersales Service',
                            link: '/service.html'
                        },
                        {
                            title: 'Download',
                            link: '/download.html'
                        },
                        {
                            title: 'Tutorial Video',
                            link: '/video.html'
                        },
                    ]
                },
                {
                    title: 'Contact',
                    link: '/contact.html',
                },
            ]
    };
  },

  props: {
      special: {
          default: false,
          type: Boolean
      }
  },

  watch: {
      menuOpen(flag) {
          if (!flag) {
            this.activeIndex = -1
          }
      }
  },

  methods: {
      openMenu() { // 打开或者关闭整个menu列表
          this.menuOpen = !this.menuOpen;
          this.$emit('menuOpenChange', this.menuOpen)
      },

      toggle(index) { // 是否展开item下拉栏
        if (this.activeIndex !== index) {
            this.activeIndex = index
        } else  {
            this.activeIndex = -1
        }
      }
  }
}

</script>
<style lang='stylus'>
pxToVw(px)
    return unit(px / 7.5 * 2, 'vw')
.mobile-header
    background #181818
    width 100%
    position fixed
    z-index 2
    transition all .6s
    .container
        display flex
        justify-content space-between
        line-height pxToVw(60)
        &-icon
            flex 0 0 pxToVw(22)
            display flex
            justify-content flex-end
            align-items center
            height pxToVw(60)
            .wrap
                transition all .3s
                .icon-bar
                    background #fff
                    border-radius pxToVw(1)
                    margin pxToVw(4)
                    width pxToVw(22)
                    height pxToVw(2)
                    transition transform .3s,-webkit-transform .3s
            .open
                .icon-bar
                    &:first-child
                        transform rotate(45deg)
                    &:last-child
                        transform translateY(pxToVw(-6)) rotate(-45deg)
        .icon-swellpro
            font-size pxToVw(27)
            color #fff
        .icon-shangcheng1
            font-size pxToVw(23)
            color #fff
        .center
            transition all .3s
            &__active
                transform translate3d(0, -100%, 0)
.mobile-special
    background none
    position relative
.mobile
    position relative
    &-mask
        position fixed
        left 0px
        top pxToVw(60)
        width 100vw
        height calc(100vh - 60px)
        z-index 999
        background #181818
        overflow hidden
        transition all .6s ease
        opacity 0
        max-height 0
        color #fff
        &__open
            max-height 2000px!important
            opacity 1
    &__open
        height 100vh
        overflow hidden
        .mobile-list__item
            transform translate3d(0,0,0)!important
            opacity 1!important
    &-list
        color #fff
        margin 0 auto
        padding 0 pxToVw(20)
        a
            color #fff
        &__item
            transform translate3d(-30px, 0, 0)
            opacity 0
            transition all .3s .3s
            >a
                font-size pxToVw(18)
                padding pxToVw(25) 0
                display block
                i
                    float right
                    transition all .3s
                    font-size pxToVw(13)
                    padding-top pxToVw(12)
                    font-weight bold
        &__wrap
            padding 0 pxToVw(15)
            overflow hidden
            max-height 0px
            transition all .3s
            a
                display block
                color #fff
                padding pxToVw(20) 0
                img
                    display block
                    width 40%
                    height 40%
            .product
                display flex
                justify-content space-between
                align-items center
                border-bottom 1px solid rgba(255,255,255,.1)
.item__open
    max-height 1000px!important
.icon-rotate
    transform rotate(180deg)
</style>